<template>
	<view class="content">
		<view class="my-journey">
			<view class="journey-content">
				<view class="journey-name">
					<view>Taxi打車</view>
					<view class="to-open">
						<view>已完成</view>
						<image src="/static/image/mine/open.png" mode=""></image>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<image src="/static/image/mine/time.png" mode=""></image>
						<view>2023/8/25 10:50</view>
					</view>
					<view class="clear-btn">投訴</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="start-point"></view>
						<view>香港國際機場</view>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="end-point"></view>
						<view>港資銀行</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-journey">
			<view class="journey-content">
				<view class="journey-name">
					<view>Super Car</view>
					<view class="to-open">
						<view>已取消</view>
						<image src="/static/image/mine/open.png" mode=""></image>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<image src="/static/image/mine/time.png" mode=""></image>
						<view>2023/8/25 10:50</view>
					</view>
					<view class="clear-btn">投訴</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="start-point"></view>
						<view>香港國際機場</view>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="end-point"></view>
						<view>港資銀行</view>
					</view>
				</view>
			</view>
		</view>
		<view class="my-journey">
			<view class="journey-content">
				<view class="journey-name">
					<view>Super Car</view>
					<view class="to-open">
						<view>已完成</view>
						<image src="/static/image/mine/open.png" mode=""></image>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<image src="/static/image/mine/time.png" mode=""></image>
						<view>2023/8/25 10:50</view>
					</view>
					<view class="clear-btn">投訴</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="start-point"></view>
						<view>香港國際機場</view>
					</view>
				</view>
				<view class="one-infor">
					<view class="left-infor">
						<view class="end-point"></view>
						<view>港資銀行</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss">
	page{
		background-color:#FAFAFA;
	}
	.my-journey{
		margin-top:24rpx;background-color:#ffffff;
		box-shadow: 0rpx 2rpx 12rpx 0rpx rgba(204,204,204,0.3);
		width:702rpx;margin-left:auto;margin-right:auto;
		box-sizing: border-box;padding:0 24rpx;border-radius: 20rpx;
		.journey-content{
			padding:24rpx 0;
			.journey-name{
				display: flex;align-items: center;justify-content: space-between;
				font-size:30rpx;line-height:42rpx;
				color:#040404;
				.to-open{
					display: flex;align-items: center;font-size:24rpx;color:#9E9E9E;
					image{
						width:10rpx;height:15rpx;margin-left:10rpx;
					}
				}
			}
			.one-infor{
				display: flex;align-items: center;margin-top:24rpx;
				justify-content: space-between;
				.left-infor{
					display: flex;align-items: center;
					font-size:26rpx;color:#040404;
					image{
						width:24rpx;height: 24rpx;
						margin-right:24rpx;
					}
					.start-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #D71B0A;margin-right:26rpx;
					}
					.end-point{
						width:16rpx;height:16rpx;border-radius: 50%;
						background-color: #FC9A03;margin-right:26rpx;
					}
				}
				.clear-btn{
					width:88rpx;height:43rpx;display: flex;align-items: center;
					justify-content: center;background-color:#D71B0A;border-radius: 5rpx;
					font-size:24rpx;color:#ffffff;
				}
			}
		}
	}
</style>
